<template>
  <div class="formtable">
    <slot name="formTabs" />
    <form-create v-if="formRules" v-model="formData" v-model:api="formApi" :rule="formRules" :option="options" />
    <div class="tablecustom">
      <div class="tabledesc" v-if="name">
        <span>{{ name }}</span>
        <el-button v-if="tableButton" type="primary" @click="tableButtonClick">{{ tableButton }}</el-button>
        <slot name="tableButtons">
        </slot>
      </div>
      <slot name="tableTabs">
      </slot>
      <el-table :style="{ width: '100%' }" ref="elTableRef" :data="tableData" :height="height" :max-height="maxHeight"
        :stripe="stripe" :row-key="rowKey" :highlight-current-row="highlightCurrentRow" @row-click="handleRowClick"
        @selection-change="handleSelectionChange">
        <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
          :show-overflow-tooltip="item.showOverflowTooltip" :width="item.width" :fixed="item.fixed" :type="item.type"
          :sortable="item.sortable" :selectable="item.selectableFn" :align="item.align">
          <!-- type 对应列的类型。 如果设置了selection则显示多选框； -->
          <!-- 如果设置了 index 则显示该行的索引（从 1 开始计算）； -->
          <!-- 如果设置了 expand 则显示为一个可展开的按钮-->
          <!-- selection / index / expand -->
          <template #default="{ row, column, $index }" v-if="item.type === 'index'">
            {{ getIndex($index) }}
          </template>
          <template #default="{ row, column, $index }" v-if="!item.type">
            <!-- 具名作用域插槽 -->
            <slot :name="item.prop" :slotProps="row" :index="$index">
              <!-- 默认内容,当父组件不传内容时默认显示该内容 -->
              <span v-if="item.formatter">
                {{ item.formatter(row[item.prop], row) }}
              </span>
              <span v-else>
                {{ row[item.prop] }}
              </span>
            </slot>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-wrap">
        <el-pagination v-if="hasPagination" v-model:current-page="currentPage" v-model:page-size="pageSize"
          :page-sizes="pageSizes" :small="small" :background="true" :layout="layout" :total="total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";

const options = reactive({
  submitBtn: {
    innerText: "搜索",
    type: "primary",
    danger: true,
    click(api) {
      //提交表单
      emit('queryTable', formData.value)
    },
  },
  resetBtn: {
    show: true,
    click(api) {
      //重置表单
      api.resetFields()
      emit('queryTable', {})
    },
  },
});
import { toRefs } from 'vue'
const props = defineProps({
  //表单相关
  formRules: Object,
  // 表格相关
  tableData: {
    type: Array,
    default: []
  },
  columns: {
    type: Array,
    default: []
  },
  height: {
    type: String,
  },
  maxHeight: {
    type: String,
    default: '500px'
  },
  stripe: {
    type: Boolean,
    default: true
  },
  rowKey: {
    type: String,
    default: 'id'
  },
  highlightCurrentRow: {
    type: Boolean,
    default: true
  },
  //  分页相关
  hasPagination: {
    type: Boolean,
    default: true
  },
  total: {
    type: Number,
    default: 0
  },
  currentPage: {
    type: Number,
    default: 1
  },
  pageSize: {
    type: Number,
    default: 10
  },
  pageSizes: {
    type: Array,
    default: [10, 20, 50, 100, 200]
  },
  layout: {
    type: String,
    default: 'total, sizes, prev, pager, next, jumper'
  },
  small: {
    type: String,
    default: 'small'
  },
  name: {
    type: String
  },
  tableButton: {
    type: String
  }
})

let {
  formRules,
  tableData,
  columns,
  height,
  maxHeight,
  stripe,
  rowKey,
  highlightCurrentRow,
  hasPagination,
  total,
  currentPage,
  pageSize,
  pageSizes,
  layout,
  small, name, tableButton
} = toRefs(props)

const emit = defineEmits(['queryTable', 'rowClick', 'selectChange', 'changeTableData', 'update:currentPage', 'update:pageSize', 'tableButtonClick'])
// 当某一行被点击时会触发该事件
const handleRowClick = (row, column, event) => {
  emit('rowClick', { row, column, event })
}
const tableButtonClick = (row, column, event) => {
  emit('tableButtonClick', { row, column, event })
}
// 当选择项发生变化时会触发该事件
const handleSelectionChange = (selection) => {
  emit('selectChange', selection)
}

// 每页条数变化的事件
const handleSizeChange = (val) => {
  emit('update:pageSize', val)
  emit('changeTableData', currentPage.value, val)
}
// 当前页码变化的事件
const handleCurrentChange = (val) => {
  emit('update:currentPage', val)
  emit('changeTableData', val, pageSize.value)
}

const getIndex = (index) => {
  return index + 1 + (currentPage.value - 1) * pageSize.value
}

const formData = ref({});
const formApi = ref(null);
</script>
<style lang="scss">
.formtable {
  overflow: hidden;
  // padding: 12px;
  background-color: #f0f2f5;
}

.form-create {
  margin-bottom: 12px;
  padding: 12px;
  background: #FFFFFF;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  border-radius: 5px;
  justify-content: flex-start;
  .fc-form-row {
    border-radius: 5px;
    width: 100%;
    display: inline-block;
  }

  .fc-form-col {
    display: inline-block;
    width: 25%;
    text-align: left;
  }

  .fc-form-item {
    margin-bottom: 0 !important;
  }

  .el-input,
  .el-select__wrapper {
    height: 35px;
    background: #FFFFFF;
    border-radius: 5px;
    // border: 1px solid #E0E2E4;
    margin-right: 24px;
  }

  .el-form-item__label {
    width: 6rem !important;
  }

  .fc-form-footer {
    .el-form-item__content {
      margin-left: 24px !important;
      justify-content: flex-end;
      margin-right: 24px;
    }
  }

  .fc-submit-btn {
    width: 70px;
    height: 35px;
    background: linear-gradient(90deg, #4597F5, #4579F5);
    border-radius: 5px;
    box-sizing: border-box;
    border: 1px solid #4688F6;
  }

  .fc-reset-btn {
    width: 70px;
    height: 35px;
    background: #FFFFFF;
    border-radius: 5px;
    border: 1px solid #2C3A4D;
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 14px;
    color: #2C3A4D;
    line-height: 50px;
  }
}

.tablecustom {
  border-radius: 5px;
  background-color: white;
  padding: 12px;

  .tabledesc {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
  }

  .el-table__header {
    width: 100% !important;

    .el-table__cell {
      color: #2C3A4D;
      font-weight: 400;
      background-color: #fafafa;
    }
  }

  .el-table__body {
    width: 100% !important;
  }

  .el-table__row {
    height: 40px;
  }
}

.pagination-wrap {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
</style>
